<template>
  <div class="flowcontainer">
    <div class="crumb">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新书展示</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="left">
        <div class="top">
          <div class="titlebox">
            <p>出版类型</p>
          </div>
          <div class="contentbox">
            <div>
              <img src="@/assets/flow/wenxue.png" alt="/" />
              <span>文学创作</span>
            </div>
            <div>
              <img src="@/assets/flow/jiaocai.png" alt="/" />
              <span>教材教辅</span>
            </div>
            <div>
              <img src="@/assets/flow/xueshu.png" alt="/" />
              <span>学术专著</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="titlebox">
            <p>联系方式</p>
          </div>
          <div class="qrcode">
            <div>
              <img :src="codeImage" alt="" />
              <!-- <img src="@/assets/flow/qr.png" alt="" /> -->
            </div>
            <span>微信扫描二维码联系客服</span>
          </div>
          <div class="contact">
            <p>联系电话</p>
           <span>{{name}} {{phone}}</span>
          </div>
        </div>
      </div>
      <div class="right"  style="margin-bottom:30px;">
        <div class="toptitle">
          <span>新书展示</span>
        </div>
        <div class="booklist">
          <NewBookItem
            v-for="(item, index) in newBookList"
            :key="index"
            :newbookMes="item"
            @click.native="toBookDetail(item)"
          ></NewBookItem>
        </div>
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
           layout="total, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import mixinViewModule from '@/mixins/view-module'
import NewBookItem from "@/components/NewBookItem/NewBookItem.vue";
export default {
  // mixins: [mixinViewModule],
  data() {
    return {
		name:localStorage.getItem('name'),
		phone:localStorage.getItem('phone'),
      //获取新书变量

      order: 'asc',                  // 排序，asc／desc
      orderField: 'levelid',             // 排序，字段
      page: 1,                    // 当前页码
      limit: 5,                  // 每页数
      total:1000,
      newBookList:[],

      // company
      corder:'',
      corderField:'',
      cpage:1,
      climit:5,
      companyInfo:[],
      codeImage:"",
    };
  },

  mounted(){
    // this.handleCurrentChange(1);
    this.init();
   this.getCompanyInfo();
  },
  methods: {
    init(){
      this.$http.get(`/bookManagement/books/page?order=${this.order}&orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`).then((res) => {
        this.total = res.data.data.total;
        // console.log(res.data.data.list);
        this.newBookList = res.data.data.list;
      }).catch((e) => {console.log(e);})
    },
    getCompanyInfo(){
      this.$http.get(`/bookManagement/company/page?orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`).then((res) => {
        // console.log(res);
        this.companyInfo = res.data.data.list;
        this.codeImage = this.companyInfo[0].image;
      }).catch((e) => {console.log(e);})
    },
    toBookDetail(obj) {
      this.$router.push({
        path: "/bookdetail",
        name: "bookdetail",
        params: obj,
      });
      sessionStorage.setItem('bookDetail',JSON.stringify(obj));
    },
    pageSizeChangeHandle(val){

    },
    pageCurrentChangeHandle(val){
      this.page = val;
      this.newBookList = [];
      this.$http.get(`/bookManagement/books/page?order=${this.order}&orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`).then((res) => {
        // console.log(res.data.data.list);
        this.total = res.data.data.total;
        this.newBookList = res.data.data.list;
      }).catch(() => {})
    }
    
  },
  components: { NewBookItem },
};
</script>

<style scoped>
.flowcontainer {
  width: 100%;
  height: 100%;
  min-height: 1130px;
  background: rgb(239, 242, 243);
}

.crumb {
  height: 50px;
  margin: 0 240px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.crumb span {
  color: rgb(3, 3, 3);
  font-family: PingFang SC;
  font-size: 18px;
  letter-spacing: 0px;
}

.flowcontainer > div:nth-child(2) {
  height: 100%;
  min-height: 1130px;
  display: flex;
  flex-direction: row;
  margin: 0 240px;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left p {
  color: rgb(0, 27, 39);
  font-family: PingFang SC;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  margin: 0;
  padding: 0;
}

.left .top {
  height: 300px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.left .top > div:first-child {
  flex: 1;
}

.titlebox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left .top > div:last-child {
  flex: 2;
  border-top: 2px solid rgb(239, 242, 243);
}

.top .contentbox {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.top .contentbox img {
  height: 80px;
  width: 80px;
}

.top .contentbox span {
  display: block;
  color: rgb(0, 27, 39);
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: undefined;
  line-height: 30px;
  letter-spacing: 0px;
}

.left .bottom {
  height: 700px;
  background-color: white;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.bottom > div:first-child {
  flex: 1;
}

.bottom > div:last-child {
  flex: 2;
}

.qrcode {
  flex: 6;
  border-top: 2px solid rgb(239, 242, 243);
  border-bottom: 2px solid rgb(239, 242, 243);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.qrcode > div {
  background-color: rgb(239, 242, 243);
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qrcode img {
  width: 300px;
  height: 300px;
}

.qrcode span {
  display: inline-block;
  color: rgb(0, 27, 39);
  font-family: PingFang SC;
  font-size: 20px;

  line-height: 30px;
  letter-spacing: 0px;
  text-align: center;
}

.contact {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.contact p {
  color: rgb(0, 27, 39);
  font-family: PingFang SC;
  font-size: 30px;
  line-height: 44px;
  letter-spacing: 0px;
  text-align: left;
}

.contact span {
  display: inline-block;
  color: rgb(0, 27, 39);
  font-family: PingFang SC;
  font-size: 25px;
  line-height: 37px;
  letter-spacing: 0px;
  text-align: left;
}

.right {
  flex: 3;
  /* height: 1920px; */
  margin-bottom: 50px;
  margin-left: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 30px;
}

.toptitle {
  /* height: 80px; */
  border-bottom: 1px solid rgb(239, 242, 243);
  text-align: left;
}

.toptitle span {
  color: rgb(6, 63, 90);
  font-family: PingFang SC;
  font-size: 30px;
  line-height: 80px;
  letter-spacing: 0px;
}
.block{
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
	padding:30px 0;
}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
.el-pagination .btn-next , .el-pagination .btn-prev {
 padding:0;
}
.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 0.0625rem;
    font-size: 30px;
    /* color:rgb(239, 242, 243); */
    color:lightgrey;
    /* font-weight: 700; */
}
.el-pager li{
   height: 35px;
  line-height: 35px;
}
.el-pager li:hover{
    color:rgb(5, 97, 54);
}
.el-pagination button {
    /* border: none; */
    /* padding: 0 0.03125rem; */
    background: 0 0;
    border: 1px solid lightgrey;
    border-radius: 5px;
    /* padding: 5px 0 10px 0; */
    width: 50px;
    height: 35px;
}
.el-pagination__jump {
    height: 35px;
    line-height: 35px;
}
.el-pager li.active {
    color: rgb(5, 97, 54);
    
}
</style>